<template>
	<div class="spread con">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>类目列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-table
		    :data="tableData"
		    style="width: 100%">
		    
		    <el-table-column
		      label="创建时间"
		      width="200">
		      <template slot-scope="scope">
		        <i class="el-icon-time"></i>
		        <span style="margin-left: 10px">{{ scope.row.create_time.date.substr(0,19)}}</span>
		      </template>
		    </el-table-column> 
		    
		    <el-table-column
		      label="分类名称"
		      width="180">
		      	<template slot-scope="scope">
		        	<span style="margin-left: 10px">{{ scope.row.cate_name }}</span>
		      	</template>
		    </el-table-column>

		    <el-table-column
		      label="分类状态"
		      width="180">
		      	<template slot-scope="scope">
		      		<el-tag type="success" v-if="scope.row.status == 1">已启用</el-tag>
		      		<el-tag type="danger" v-else>已关闭</el-tag>
		      	</template>
		    </el-table-column>

		    <el-table-column label="操作">
		      <template slot-scope="scope">
		        <!-- <el-button
		          size="mini"
		          @click="handleEdit(scope.$index, scope.row)">编辑分类</el-button> -->
		        <!-- <el-button
		          size="mini"
		          type="danger"
		          @click="handleDelete(scope.$index, scope.row)">关闭分类</el-button> -->
		        <el-button
		          size="mini"
		          type="danger"
		          @click="delCate(scope.row)">删除分类</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return {
				tableData: [],
				token:"",

			}
		},
		created(){
			this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				axios.get('/api/cates')
					.then(result => {
						console.log(result,result.data.code);
						if(result.data.code == 200){
							this.tableData = result.data.result;
						}
					})
					.catch(error => {

					})
			},
			delCate(row)
			{
				this.$confirm('如果删除这个类目他下面所有属性也会被删除', '确认信息', {
		          	distinguishCancelAndClose: true,
		          	confirmButtonText: '删除类目以及下面属性',
		          	cancelButtonText: '取消',
		          	type:"error"
		        })
		        .then(() => {
		            axios.post('/api/cates/del',{_token:this.token,id:row.id})
					.then(result => {
						console.log(result);
						if(result.data.code == 200){
							this.tableData = result.data.result;
						}
						this.getGoodsList();
					})
					.catch(error => {

					})

		        })
		        .catch(action => {
		            
		        });
			},
			handleEdit(index, row) {
		        console.log(index, row);
		    },
		    handleDelete(index, row) {
		        console.log(index, row);
		    }
		}
	}
</script>

<style lang="scss">
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{
	      	height: 40px;
	    }
  	}
</style>
